
<template>
  <div  class="main-div">
    <Row>
      <Col span="24">

        <service-dialog  :show.sync="show" :existData="existData" :on-ok="confirmDialogEvent"></service-dialog>



        <Card  dis-hover class="task-card">
          <div class="app-container">

            <el-form :inline="true" :model="queryForm" class="demo-form-inline"  style="margin-left: -3.6%" size='mini'>

              <el-form-item label="委托人">
                <el-input v-model="queryForm.agentName" clearable></el-input>
              </el-form-item>
              <el-form-item label="开始日期">
                <DatePicker  format="yyyy-MM-dd"  v-model="queryForm.startDate" @on-change="queryFormCreateTime"   type="date"></DatePicker>
              </el-form-item>
              <el-form-item label="结束日期">
                <DatePicker  format="yyyy-MM-dd"  v-model="queryForm.endDate" @on-change="queryFormEndTime"   type="date"></DatePicker>


              </el-form-item>
              <el-form-item  >
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row type="flex" justify="start">
              <el-form  class="demo-form-inline">
                <el-form-item>

                  <el-button type="primary" @click="addModelDialog" ><Icon type="ios-add"/>
                    添加</el-button>
                  <el-button type="error" v-if="checkTableData.length>0">
                    <Icon type="md-trash"/>
                    删除
                  </el-button>

                </el-form-item>
              </el-form>
            </el-row>


            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  @select="tableSelect"
                  @select-all="tableSelect"

                >
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    fixed
                    align="center">
                    <template slot-scope="scope">
                      <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>


                  <el-table-column
                    prop="agentName"
                    label="委托人"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="opinion"
                    label="委托说明"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="startDate"
                    label="生效时间"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    prop="endDate"
                    label="失效时间"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                      <el-button   size='mini' type='text' icon="el-icon-edit"   @click="edit(scope.row.id)">编辑</el-button>

                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="end">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="prev, pager, next, sizes, total, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
        <Modal
          :mask-closable="false"
          title="添加委托"
          :transfer="false"
          v-model="addModel"
          width="45%">
          <Form :model="addForm" :label-width="120" :rules="ruleValidate" ref="addForm">
            <FormItem label="委托人"  prop="agentName">
              <Input v-model="addForm.agentName" disabled  style="width: 80%"></Input>


              <Button type="primary"  v-if="addForm.id.length==0" @click="show=true"><Icon type="ios-contact" />选择</Button>
            </FormItem>
            <FormItem label="范围"  prop="type">

              <RadioGroup v-model="addForm.type" >
                <Radio label="1">
                  <span>全部</span>
                </Radio>
              </RadioGroup>

            </FormItem>

            <FormItem label="开始时间"  prop="startDate" style="width: 80%">
              <DatePicker type="date"  placeholder="开始时间" @on-change="startDateChange" format="yyyy-MM-dd HH:mm:ss" v-model="addForm.startDate"></DatePicker>

            </FormItem>
            <FormItem label="结束时间"  prop="endDate">
              <DatePicker type="date"   placeholder="结束时间" @on-change="endDateChange" format="yyyy-MM-dd HH:mm:ss" v-model="addForm.endDate"></DatePicker>
            </FormItem>


            <FormItem label="委托说明" prop="opinion">
              <Input v-model="addForm.opinion"  type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
          </Form>
          <div slot="footer"  >

            <el-button type="primary"    @click="handleSubmit('addForm')" :loading="loading">确定</el-button>
            <el-button  @click="handleReset('addForm')" >取消</el-button>


          </div>

        </Modal>

      </Col>


    </Row>
    <Row>
      <Col span="24">
      <footer></footer>
      </Col>
    </Row>
  </div>


</template>

<script>
  import {getAgentList,saveAgent,removeAgent,getAgent} from "@/api/analy";
  import Footer from '../../../common/footer';
  import serviceDialog from '@/views/components/org/serviceDialog';

  export default {
    name: 'Task',
    components:{
      Footer,
      serviceDialog
    },

    data() {
      return {
        loading:false,
        tableData: [],
        checkTableData: [],
        tableHeight: 450,
        queryDate:[],
        existData:[{"a":1}],
        deleteIds:[],
        total: 0,
        chartVisible: false,
        addModel: false,
        show: false,
        forbiddenSwitch: false,
        chartData: {},
        sellerId: 0,
        category: [],
        addForm:{
          startDate:"",
          endDate:"",
          type:"1",
          agentId:"",
          agentName:"",
          opinion:"",
          id:"",

        },
        ruleValidate: {
          agentId: [
            { required: true, message: '委托人必须填写', trigger: 'blur' }
          ],
          startDate: [
            { required: true, message: '开始时间必须填写', trigger: 'blur' }
          ],
          endDate: [
            { required: true, message: '结束时间必须填写', trigger: 'blur' }
          ],
        },
        queryForm: {
          page: 1,
          limit: 10,
          pageSize: 10,

          agentName: "",
          startDate: "",
          endDate: "",
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      queryFormCreateTime:function(e){
        this.queryForm.startDate=e;
      },
      queryFormEndTime:function(e){
        this.queryForm.endDate=e;
      },
      confirmDialogEvent:function(data){
        if (data){
        this.addForm.agentId=  data[0].userNo;
        this.addForm.agentName=  data[0].fullname
        }
      },
       edit:function(id){
        this.addModelDialog()
         getAgent(id).then((response) => {
         var result=  response.data;

           this.addForm.id=result.id
          this.addForm.agentId=result.agentId
          this.addForm.agentName=result.agentName

          this.addForm.opinion=result.opinion
           this.startDateChange(result.startDate)
           this.endDateChange(result.endDate)

        })
      },
      startDateChange:function(data){
       this.addForm.startDate=data
      },
      endDateChange:function(data){
       this.addForm.endDate=data
      },
    handleReset (name) {
      this.addModel=false
      this.$refs[name].resetFields();
      this.addForm.id=""
      this.addForm.agentId=""

    },
      handleSubmit (name) {
        try {        this.$refs[name].validate((valid) => {
          if (valid) {
            this.loading=true
            saveAgent(this.addForm).then((response) => {
              var code=   response.code;

              if (code==0){
                this.addModel=false;
                this.handleReset('addForm')
                this.getData()
              }else{
                this.$message({"duration":'800',message:response.msg,type:'success',customClass:'zZindex'});

              }
              this.loading=false

            })

          } else {
          }
        })


        }finally {
          this.loading=false
        }
      },
      tableSelect:function(data){
        this.checkTableData=data;
      },
      selectChange:function(data){
        this.addForm.category=data;
      },
      addModelDialog:function(){

     this.addModel=true;

      },
      remove:function(){
        var checkTableData=this.checkTableData;
        var ids=[];

        for (var i = 0; i <checkTableData.length ; i++) {
          ids.push(checkTableData[i].id);
        }
        removeAgent({ ids : ids }).then((response) => {
          if (response.code==0){
            this.getData()
          }else{
            this.$message({"duration":'800',message:response.msg,type:'warning',customClass:'zZindex'});

          }
        })

      },
      getData: function () {
        getAgentList(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);
        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {
        this.queryForm.page = 1
        this.getData()
      },
      reset() {
        this.queryForm.nameOrCategory = "";
        this.queryForm.agentName = "";
        this.queryForm.startDate = "";
        this.queryForm.endDate = "";
        this.getData()
      }

    }

  }

</script>
<style lang="scss" scoped>
.task-card{
  margin-top: 10px;
}
.input_w {
  width: 30% !important;
}
.main-div {
  background-color: #f3f3f3!important;
}

</style>
